<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/9/6
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>
        function show(id,e){
            document.getElementById("d1").style.display="block";
            console.log(e.clientX+"*"+e.clientY);

            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.responseText);
                    // console.log(JSON.parse(xhr.responseText))//字符串的属性必须使用双引号引起来的
                    // console.log(eval("("+xhr.responseText+")"));
                   let product=JSON.parse(xhr.responseText);//字符串的属性必须使用双引号引起来的
                    document.getElementById("s1").innerHTML=product.id;
                    document.getElementById("s2").innerHTML=product.name;
                    document.getElementById("s3").innerHTML=product.price;
                    document.getElementById("d1").style.left=e.clientX+10;
                    document.getElementById("d1").style.top=e.clientY+10;


                }
            };
            xhr.open("get","${pageContext.request.contextPath}/findById.product?id="+id,true);
            xhr.send(null);
        }
    </script>
</head>
<body>
    <%--查询所有商品:传统的web方式--%>
    <ul>
        <c:forEach items="${products}" var="product">
            <li  onmouseover="show(${product.id},event)">${product.name}</li>
        </c:forEach>
    </ul>
    <%--展示商品详情：使用ajax实现，当鼠标停留在某一个商品上的时候--%>
    <hr>
    <div id="d1" style="background:#ccc;width:200px;height:150px;padding:10px;position: absolute;display: none;">
        商品编号: <span id="s1"></span><br>
        商品名称: <span id="s2"></span><br>
        商品价格: <span id="s3"></span><br>
    </div>

</body>
</html>
